<!-- 底部跳转页面组件-->
<template>
  <div id="footDiv">
    <div>
      <router-Link to="/" style="text-decoration: none;letter-spacing: 0.1rem;" :style="{color:this.$route.path =='/'?'red':'black'}">
        <i class="el-icon-discount" style="font-size:0.9rem"></i>
        <div :style="{color:this.$route.path =='/'?'red':'black'}">首页</div>
      </router-Link>
    </div>
    <div>
      <router-Link to="/search" style="text-decoration: none;letter-spacing: 0.1rem;" :style="{color:this.$route.path =='/search'?'red':'black'}">
        <i class="el-icon-shopping-bag-1" style="font-size:0.9rem"></i>
        <div :style="{color:this.$route.path =='/search'?'red':'black'}">商城</div>
      </router-Link>
    </div>

    <div>
      <router-Link to="/server" style="text-decoration: none;letter-spacing: 0.1rem;">
        <i class="el-icon-trophy" style="font-size:0.9rem" :style="{color:this.$route.path =='/server'?'red':'black'}"></i>
        <div :style="{color:this.$route.path =='/server'?'red':'black'}">服务</div>
      </router-Link>
    </div>
    <div @click="toMine" >
        <i class="el-icon-user" style="font-size:0.9rem" 
        :style="{color:this.$route.path =='/login'||this.$route.path =='/mine'?'red':'black'}"></i>
        <div :style="{color:this.$route.path =='/login'||this.$route.path =='/mine'?'red':'black'}">我的</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  methods: {
    toMine(){
      if(this.isLogin){//判断用户点击时，是否登录
        this.$router.push("/mine")
      }else{
        this.$notify({
          title: '警告',
          message: '你还为登录哦！！',
          type: 'warning',
          duration:1000
        });
        this.$router.push("/login")
      }
    }
  },
  computed:{
    ...mapState(["isLogin"])
  }
};
</script>

<style lang="less" scoped>
#footDiv{
    position: fixed;
    bottom: 0;
    z-index: 10;
    left: 0;
    width: 100vw;
    height: 8vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 1px solid rgb(228, 227, 227);
    background-color: rgb(247, 247, 247);
    div{
            font-size: 0.8rem;
            color: #000;
    }
 
}
</style>